﻿<div class="animated fadeIn">
  <div class="row">
    <div class="col-sm-6 col-lg-3">
      <div class="card card-accent-default">
        <div class="card-block p-1 clearfix">
          <i class="fa fa-cogs bg-primary p-1 font-2xl mr-1 float-left"></i>
          <div class="text-uppercase text-muted font-weight-bold font-xs mb-0 mt-h">Clients</div>
          <div class="h5">4.589</div>
        </div>
      </div>
    </div><!--/.col-->

    <div class="col-sm-6 col-lg-3">
      <div class="card card-accent-default">
        <div class="card-block p-1 clearfix">
          <i class="fa fa-laptop bg-info p-1 font-2xl mr-1 float-left"></i>
          <div class="text-uppercase text-muted font-weight-bold font-xs mb-0 mt-h">Deals</div>
          <div class="h5">789</div>
        </div>
      </div>
    </div><!--/.col-->

    <div class="col-sm-6 col-lg-3">
      <div class="card card-accent-default">
        <div class="card-block p-1 clearfix">
          <i class="fa fa-moon-o bg-warning p-1 font-2xl mr-1 float-left"></i>
          <div class="text-uppercase text-muted font-weight-bold font-xs mb-0 mt-h">Income</div>
          <div class="h5">$1.999</div>
        </div>
      </div>
    </div><!--/.col-->

    <div class="col-sm-6 col-lg-3">
      <div class="card card-accent-default">
        <div class="card-block p-1 clearfix">
          <i class="fa fa-bell bg-danger p-1 font-2xl mr-1 float-left"></i>
          <div class="text-uppercase text-muted font-weight-bold font-xs mb-0 mt-h">Account</div>
          <div class="h5">$100K</div>
        </div>
      </div>
    </div><!--/.col-->
  </div><!--/.row-->
  <div class="row">
    <div class="col-md-12">
      <div class="card card-accent-secondary">
        <div class="card-header">
          Traffic &amp; Sales
        </div>
        <div class="card-block">
          <table class="table table-hover table-outline mb-0 hidden-sm-down">
            <thead class="thead-default">
              <tr>
                <th class="text-center"><i class="icon-people"></i></th>
                <th>User</th>
                <th class="text-center">Country</th>
                <th>Usage</th>
                <th class="text-center">Payment Method</th>
                <th>Activity</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td class="text-center">
                  <div class="avatar">
                    <img src="//127.0.0.1:4200/assets/img/avatars/1.jpg" class="img-avatar" alt="admin@bootstrapmaster.com" src="//127.0.0.1:4200/assets/img/avatars/1.jpg">
                    <span class="avatar-status badge-success"></span>
                  </div>
                </td>
                <td>
                  <div>Yiorgos Avraamu</div>
                  <div class="small text-muted">
                    <span>New</span> | Registered: Jan 1, 2015
                  </div>
                </td>
                <td class="text-center">
                  <img src="//127.0.0.1:4200/assets/img/flags/USA.png" alt="USA" style="height:24px;" src="//127.0.0.1:4200/assets/img/flags/USA.png">
                </td>
                <td>
                  <div class="clearfix">
                    <div class="float-left">
                      <strong>50%</strong>
                    </div>
                    <div class="float-right">
                      <small class="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
                    </div>
                  </div>
                  <div class="progress progress-xs">
                    <div class="progress-bar bg-success" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
                  </div>
                </td>
                <td class="text-center">
                  <i class="fa fa-cc-mastercard" style="font-size:24px"></i>
                </td>
                <td>
                  <div class="small text-muted">Last login</div>
                  <strong>10 sec ago</strong>
                </td>
              </tr>
              <tr>
                <td class="text-center">
                  <div class="avatar">
                    <img src="//127.0.0.1:4200/assets/img/avatars/2.jpg" class="img-avatar" alt="admin@bootstrapmaster.com" src="//127.0.0.1:4200/assets/img/avatars/2.jpg">
                    <span class="avatar-status badge-danger"></span>
                  </div>
                </td>
                <td>
                  <div>Avram Tarasios</div>
                  <div class="small text-muted">

                    <span>Recurring</span> | Registered: Jan 1, 2015
                  </div>
                </td>
                <td class="text-center">
                  <img src="//127.0.0.1:4200/assets/img/flags/Brazil.png" alt="Brazil" style="height:24px;" src="//127.0.0.1:4200/assets/img/flags/Brazil.png">
                </td>
                <td>
                  <div class="clearfix">
                    <div class="float-left">
                      <strong>10%</strong>
                    </div>
                    <div class="float-right">
                      <small class="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
                    </div>
                  </div>
                  <div class="progress progress-xs">
                    <div class="progress-bar bg-info" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
                  </div>
                </td>
                <td class="text-center">
                  <i class="fa fa-cc-visa" style="font-size:24px"></i>
                </td>
                <td>
                  <div class="small text-muted">Last login</div>
                  <strong>5 minutes ago</strong>
                </td>
              </tr>
              <tr>
                <td class="text-center">
                  <div class="avatar">
                    <img src="//127.0.0.1:4200/assets/img/avatars/3.jpg" class="img-avatar" alt="admin@bootstrapmaster.com" src="//127.0.0.1:4200/assets/img/avatars/3.jpg">
                    <span class="avatar-status badge-warning"></span>
                  </div>
                </td>
                <td>
                  <div>Quintin Ed</div>
                  <div class="small text-muted">
                    <span>New</span> | Registered: Jan 1, 2015
                  </div>
                </td>
                <td class="text-center">
                  <img src="//127.0.0.1:4200/assets/img/flags/India.png" alt="India" style="height:24px;" src="//127.0.0.1:4200/assets/img/flags/India.png">
                </td>
                <td>
                  <div class="clearfix">
                    <div class="float-left">
                      <strong>74%</strong>
                    </div>
                    <div class="float-right">
                      <small class="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
                    </div>
                  </div>
                  <div class="progress progress-xs">
                    <div class="progress-bar bg-warning" role="progressbar" style="width: 74%" aria-valuenow="74" aria-valuemin="0" aria-valuemax="100"></div>
                  </div>
                </td>
                <td class="text-center">
                  <i class="fa fa-cc-stripe" style="font-size:24px"></i>
                </td>
                <td>
                  <div class="small text-muted">Last login</div>
                  <strong>1 hour ago</strong>
                </td>
              </tr>
              <tr>
                <td class="text-center">
                  <div class="avatar">
                    <img src="//127.0.0.1:4200/assets/img/avatars/4.jpg" class="img-avatar" alt="admin@bootstrapmaster.com" src="//127.0.0.1:4200/assets/img/avatars/4.jpg">
                    <span class="avatar-status badge-default"></span>
                  </div>
                </td>
                <td>
                  <div>Enéas Kwadwo</div>
                  <div class="small text-muted">
                    <span>New</span> | Registered: Jan 1, 2015
                  </div>
                </td>
                <td class="text-center">
                  <img src="//127.0.0.1:4200/assets/img/flags/France.png" alt="France" style="height:24px;" src="//127.0.0.1:4200/assets/img/flags/France.png">
                </td>
                <td>
                  <div class="clearfix">
                    <div class="float-left">
                      <strong>98%</strong>
                    </div>
                    <div class="float-right">
                      <small class="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
                    </div>
                  </div>
                  <div class="progress progress-xs">
                    <div class="progress-bar bg-danger" role="progressbar" style="width: 98%" aria-valuenow="98" aria-valuemin="0" aria-valuemax="100"></div>
                  </div>
                </td>
                <td class="text-center">
                  <i class="fa fa-paypal" style="font-size:24px"></i>
                </td>
                <td>
                  <div class="small text-muted">Last login</div>
                  <strong>Last month</strong>
                </td>
              </tr>
              <tr>
                <td class="text-center">
                  <div class="avatar">
                    <img src="//127.0.0.1:4200/assets/img/avatars/5.jpg" class="img-avatar" alt="admin@bootstrapmaster.com" src="//127.0.0.1:4200/assets/img/avatars/5.jpg">
                    <span class="avatar-status badge-success"></span>
                  </div>
                </td>
                <td>
                  <div>Agapetus Tadeáš</div>
                  <div class="small text-muted">
                    <span>New</span> | Registered: Jan 1, 2015
                  </div>
                </td>
                <td class="text-center">
                  <img src="//127.0.0.1:4200/assets/img/flags/Spain.png" alt="Spain" style="height:24px;" src="//127.0.0.1:4200/assets/img/flags/Spain.png">
                </td>
                <td>
                  <div class="clearfix">
                    <div class="float-left">
                      <strong>22%</strong>
                    </div>
                    <div class="float-right">
                      <small class="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
                    </div>
                  </div>
                  <div class="progress progress-xs">
                    <div class="progress-bar bg-info" role="progressbar" style="width: 22%" aria-valuenow="22" aria-valuemin="0" aria-valuemax="100"></div>
                  </div>
                </td>
                <td class="text-center">
                  <i class="fa fa-google-wallet" style="font-size:24px"></i>
                </td>
                <td>
                  <div class="small text-muted">Last login</div>
                  <strong>Last week</strong>
                </td>
              </tr>
              <tr>
                <td class="text-center">
                  <div class="avatar">
                    <img src="//127.0.0.1:4200/assets/img/avatars/6.jpg" class="img-avatar" alt="admin@bootstrapmaster.com" src="//127.0.0.1:4200/assets/img/avatars/6.jpg">
                    <span class="avatar-status badge-danger"></span>
                  </div>
                </td>
                <td>
                  <div>Friderik Dávid</div>
                  <div class="small text-muted">
                    <span>New</span> | Registered: Jan 1, 2015
                  </div>
                </td>
                <td class="text-center">
                  <img src="//127.0.0.1:4200/assets/img/flags/Poland.png" alt="Poland" style="height:24px;" src="//127.0.0.1:4200/assets/img/flags/Poland.png">
                </td>
                <td>
                  <div class="clearfix">
                    <div class="float-left">
                      <strong>43%</strong>
                    </div>
                    <div class="float-right">
                      <small class="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
                    </div>
                  </div>
                  <div class="progress progress-xs">
                    <div class="progress-bar bg-success" role="progressbar" style="width: 43%" aria-valuenow="43" aria-valuemin="0" aria-valuemax="100"></div>
                  </div>
                </td>
                <td class="text-center">
                  <i class="fa fa-cc-amex" style="font-size:24px"></i>
                </td>
                <td>
                  <div class="small text-muted">Last login</div>
                  <strong>Yesterday</strong>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div><!--/.col-->
  </div><!--/.row-->
</div>
